<template>
  <div class="app-container">
    <el-row :gutter="24">

      <!-- 左侧查询表单 -->
<!--      <el-col :span="4">-->
<!--        <div class="MySidebar">-->
<!--          &lt;!&ndash; 课程名称搜索框 &ndash;&gt;-->
<!--          <h4 style="text-align: center;">课程列表</h4>-->
<!--          <div style="width:90%; margin:auto;" >-->
<!--            <div class="demo-input-suffix" >-->
<!--              <el-input placeholder="请输入课程名称"-->
<!--                        suffix-icon="el-icon-search"-->
<!--                        size="small">-->
<!--              </el-input>-->
<!--            </div>-->
<!--          </div>-->
<!--          &lt;!&ndash; 课程列表展示 &ndash;&gt;-->
<!--          <div style="">-->
<!--            <ul class="infinite-list"  style="overflow:auto;max-height: 200px">-->
<!--               <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>-->
<!--              <el-checkbox v-for="item in courseList" key="courseId" style="margin-top: 4px; ">-->
<!--                  {{item.courseName}}-->
<!--              </el-checkbox>-->

<!--            </ul>-->
<!--          </div>-->
<!--        </div>-->

<!--      </el-col>-->

      <!-- 右侧表格数据 -->
      <el-col :span="24">
        <div class="grid-content bg-purple">
          <!--查询表单-->
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item size="mini">
              <el-input v-model="conceptQueryObj.courseName" placeholder="课程名称" @change="getConceptList(0)"/>
            </el-form-item>
            <el-form-item size="mini">
              <el-input v-model="conceptQueryObj.categoryName" placeholder="目录名称" @change="getConceptList(0)"/>
            </el-form-item>
            <el-form-item size="mini">
              <el-input v-model="conceptQueryObj.conceptName" placeholder="知识点名称" @change="getConceptList(0)"/>
            </el-form-item>
            <el-form-item size="mini">
              <el-input v-model="conceptQueryObj.nextConceptStr" placeholder="关联知识点名称" @change="getConceptList(0)"/>
            </el-form-item>
            <el-form-item size="mini">
              <el-input v-model="conceptQueryObj.pName" placeholder="属于知识点名称" @change="getConceptList(0)"/>
            </el-form-item>
            <el-form-item size="mini">
              <el-input v-model="conceptQueryObj.propertiesKey" placeholder="属性键" @change="getConceptList(0)"/>
            </el-form-item>
            <el-form-item size="mini">
              <el-input v-model="conceptQueryObj.propertiesValue" placeholder="属性值" @change="getConceptList(0)"/>
            </el-form-item>
<!--            <el-form-item size="mini">-->
<!--              <el-input v-model="conceptQueryObj.createdByName" placeholder="创建人姓名" @change="getConceptList(0)"/>-->
<!--            </el-form-item>-->

            <el-button type="primary" icon="el-icon-search" @click="getConceptList()" size="mini">搜索</el-button>
            <el-button type="default" icon="el-icon-refresh" @click="resetData()" size="mini">重置</el-button>
          </el-form>
          <!--新增、导入、导出按钮-->
          <div class="buttonClass" style="margin-top: 20px;">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="openAddConceptDialog"
            >新增
            </el-button>

<!--            <el-button-->
<!--              type="success"-->
<!--              plain-->
<!--              icon="el-icon-upload2"-->
<!--              size="mini"-->
<!--              @click="handleImport"-->
<!--            >导入-->
<!--            </el-button>-->

<!--            <el-button-->
<!--              type="warning"-->
<!--              plain-->
<!--              icon="el-icon-download"-->
<!--              size="mini"-->
<!--              @click="handleExport"-->
<!--            >导出-->
<!--            </el-button>-->
          </div>

          <!--知识点列表 -->
          <el-table
            :data="conceptsList"
            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            style="width: 100%;margin-bottom: 20px;"
            border fit highlight-current-row>
            <el-table-column prop="conceptCode" label="知识点编号" show-overflow-tooltip/>

            <el-table-column prop="courseName" label="课程名称" show-overflow-tooltip/>

            <el-table-column prop="categoryName" label="目录名称" show-overflow-tooltip/>

            <el-table-column prop="conceptName" label="知识点名称" show-overflow-tooltip/>

            <!-- <el-table-column prop="parentConceptId" label="上级知识点"/> -->

            <el-table-column prop="parentConceptName" label="上级知识点" show-overflow-tooltip/>

            <el-table-column prop="nextConceptStr" label="关联知识点" show-overflow-tooltip/>

            <el-table-column prop="propertiesKey" label="属性键" show-overflow-tooltip/>

            <el-table-column prop="propertiesValue" label="属性值" show-overflow-tooltip/>

<!--            <el-table-column prop="createdByName" label="创建人"/>-->

            <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip/>

            <el-table-column prop="updateTime" label="修改时间" show-overflow-tooltip/>

            <el-table-column label="操作" width="250" align="center">
              <template slot-scope="scope">
                <!--修改知识点信息-->
                <el-tooltip class="item" effect="dark" content="修改知识点信息" placement="top-start">
                  <el-button type="primary" size="mini" icon="el-icon-edit" @click="openUpdateConceptDialog(scope.row)">
                  </el-button>
                </el-tooltip>
                <!--修改后继知识点信息-->
                <el-tooltip class="item" effect="dark" content="修改关联知识点信息" placement="top-start">
                  <el-button type="info" size="mini" icon="el-icon-more" @click="openNextConceptDialogForm(scope.row)">
                  </el-button>
                </el-tooltip>
                <!--删除知识点信息-->
                <el-tooltip class="item" effect="dark" content="删除知识点信息" placement="top-start">
                  <el-button type="danger" size="mini" icon="el-icon-delete"
                             @click="deleteConceptById(scope.row.conceptId)">
                  </el-button>
                </el-tooltip>
                <!--查看资源-->
                <el-tooltip class="item" effect="dark" content="查看资源信息" placement="top-start">
                  <el-button type="warning" size="mini" @click="gotoResource(scope.row.conceptId)">
                    <i class="el-icon-arrow-right el-icon--right"></i>
                  </el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
            :current-page="page"
            :page-size="limit"
            :total="total"
            background
            layout="prev, pager, next"
            style="padding: 30px 0; text-align: center;"
            @current-change="getConceptList"
          />

          <!-- 新增知识点弹框 -->
          <el-dialog title="新增知识点信息" :visible.sync="addConceptDialogFormVisible">
            <el-form :model="addConceptInfo" ref="addConceptInfo">
              <el-form-item label="课程与目录名称" prop="courseName" label-width="120px">
                <!-- 一级下拉框（课程信息） -->
                <el-select v-model="addCourse"
                           value-key="courseId"
                           clearable
                           placeholder="请选择课程名称"
                           @change="courseOneChanged">
                  <el-option
                    v-for="item in oneCoursesIdAndNameList"
                    :key="item.courseId"
                    :label="item.courseName"
                    :value="item">
                  </el-option>
                </el-select>
                <!-- 二级联动下拉框（目录信息） -->
                <el-select v-model="addCategory" clearable value-key="categoryId" placeholder="请选择目录名称">
                  <el-option
                    v-for="item in twoCategoryIdAndNameList"
                    :key="item.categoryId"
                    :label="item.categoryName"
                    :value="item">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="知识点名称" label-width="120px">
                <el-input v-model="addConceptInfo.conceptName"/>
              </el-form-item>

              <el-form-item label="上级知识点名称" label-width="120px">
                <el-select v-model="pConcept" value-key="conceptId" placeholder="请选择上级知识点名称" clearable>
                  <el-option
                    v-for="item in allConceptsIdAndNameList"
                    :key="item.conceptId"
                    :label="item.conceptName"
                    :value="item">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="属性键" label-width="120px">
                <el-input v-model="addConceptInfo.propertiesKey"/>
              </el-form-item>

              <el-form-item label="属性值" label-width="120px">
                <el-input v-model="addConceptInfo.propertiesValue"/>
              </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="addConceptInfoFunc(addCategory,pConcept)">确 定</el-button>
              <el-button @click="addCategoryDialogFormVisible = false">取 消</el-button>
            </div>
          </el-dialog>

          <!-- 修改知识点弹框 -->
          <el-dialog title="修改知识点信息" :visible.sync="updateConceptDialogFormVisible">
            <el-form :model="updateConceptInfo" ref="updateConceptInfo">
              <el-form-item label="课程与目录名称" label-width="120px">
                <el-col :span="8">
                  <el-input v-model="updateConceptInfo.courseName" disabled/>
                </el-col>
                <el-col :span="8">
                  <el-input v-model="updateConceptInfo.categoryName" disabled/>
                </el-col>
              </el-form-item>

              <el-form-item label="知识点名称" label-width="120px">
                <el-input v-model="updateConceptInfo.conceptName" autocomplete="off"></el-input>
              </el-form-item>

              <el-form-item label="上级知识点名称" label-width="120px">
                <el-select v-model="pConcept" value-key="conceptId" placeholder="请选择知识点名称" clearable>
                  <el-option
                    v-for="item in allConceptsIdAndNameList"
                    :key="item.conceptId"
                    :label="item.conceptName"
                    :value="item">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="属性键" label-width="120px">
                <el-input v-model="updateConceptInfo.propertiesKey" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="属性值" label-width="120px">
                <el-input v-model="updateConceptInfo.propertiesValue" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="updateConceptInfoFunc(pConcept)">确 定</el-button>
              <el-button @click="updateConceptDialogFormVisible = false">取 消</el-button>
            </div>
          </el-dialog>

          <!-- 修改关联知识点弹框 -->
          <el-dialog title="修改关联知识点" :visible.sync="nextConceptDialogFormVisible">
            <el-form>
              <el-form-item label="课程名称" label-width="120px">
                <el-input v-model="currentConcept.courseName" :disabled="true"/>
              </el-form-item>

              <el-form-item label="目录名称" label-width="120px">
                <el-input v-model="currentConcept.categoryName" :disabled="true"/>
              </el-form-item>

              <el-form-item label="知识点名称" label-width="120px">
                <el-input v-model="currentConcept.conceptName" :disabled="true"/>
              </el-form-item>

              <el-form-item label="可选关联知识点">
                <el-select v-model="nextConceptIdAndName" clearable value-key="conceptId" filterable
                           placeholder="请选择关联知识点名称">
                  <el-option
                    v-for="item in canBeAddedNextConceptList"
                    :key="item.conceptId"
                    :label="item.conceptName"
                    :value="item">
                  </el-option>
                </el-select>
                <el-select v-model="nextConceptIdAndName.relationLevel" placeholder="请选择关联等级">
                  <el-option
                    v-for="item in relationLevelList"
                    :key="item.relationLevel"
                    :label="item.relationName"
                    :value="item.relationLevel"/>
                </el-select>
                <el-input-number v-model="nextConceptIdAndName.relationLevel" :min="1" :max="4" label="关联等级"/>
                <el-button class="noBorder" icon="el-icon-circle-plus-outline"
                           @click="addNextConcept"/>
              </el-form-item>

              <!--动态编辑关联知识点标签-->
              <el-form-item label="关联知识点列表">
                <el-tag
                  v-for="item in nextConceptList"
                  :key="item.conceptId"
                  closable
                  :type="colorObj[item.relationLevel]"
                  @close="handleNextConceptTagClose(item)">
                  {{item.conceptName}}
                </el-tag>
              </el-form-item>

              <!-- 色块说明 -->
              <el-form-item label="颜色含义" label-width="100px">
                <div style=" display: inline-block; background: #909399;width: 10px; height: 10px; margin: 0 auto"/>
                <div style="display: inline-block; margin-right: 10px">弱关联</div>

                <div style="display: inline-block;background: #E6A23C; width: 10px;  height: 10px;  margin: 0 auto"/>
                <div style="display: inline-block;margin-right: 10px">半关联</div>

                <div style="display: inline-block;background: #67C23A;   width: 10px;  height: 10px;  margin: 0 auto"/>
                <div style="display: inline-block;margin-right: 10px">强关联</div>

                <div style="display: inline-block;background: #409EFF;width: 10px;height: 10px; margin: 0 auto"/>
                <div style="display: inline-block;margin-right: 10px">全关联</div>
              </el-form-item>

            </el-form>
          </el-dialog>

        </div>
      </el-col>
    </el-row>

  </div>
</template>
<script>
  import course from '@/api/management/course'
  import category from '@/api/management/category'
  import concept from '@/api/management/concept'

  export default {
    data() {
      return {
        courseList:[
          {
            courseId:'1',
            courseName:'java程序设计'
          },
          {
            courseId:'2',
            courseName:'C++程序设计'
          },
          {
            courseId:'3',
            courseName:'php程序设计'
          },
          {
            courseId:'4',
            courseName:'java程序设计'
          },
          {
            courseId:'5',
            courseName:'C++程序设计'
          },
          {
            courseId:'6',
            courseName:'C++程序设计'
          },
          {
            courseId:'7',
            courseName:'C++程序设计'
          },
          {
            courseId:'8',
            courseName:'C++程序设计'
          },
          {
            courseId:'9',
            courseName:'C++程序设计'
          },
          {
            courseId:'10',
            courseName:'C++程序设计'
          },
          {
            courseId:'11',
            courseName:'C++程序设计'
          },
          {
            courseId:'12',
            courseName:'C++程序设计'
          },
          {
            courseId:'13',
            courseName:'C++程序设计'
          },
          {
            courseId:'14',
            courseName:'C++程序设计'
          },
          {
            courseId:'15',
            courseName:'C++程序设计'
          },
          {
            courseId:'16',
            courseName:'C++程序设计'
          },
          {
            courseId:'17',
            courseName:'C++程序设计'
          },
          {
            courseId:'18',
            courseName:'C++程序设计'
          },
          {
            courseId:'19',
            courseName:'C++程序设计'
          },
          {
            courseId:'20',
            courseName:'C++程序设计'
          },
          {
            courseId:'21',
            courseName:'C++程序设计'
          },
          {
            courseId:'22',
            courseName:'C++程序设计'
          },
          {
            courseId:'23',
            courseName:'C++程序设计'
          },
          {
            courseId:'24',
            courseName:'C++程序设计'
          },
          {
            courseId:'25',
            courseName:'C++程序设计'
          },
          {
            courseId:'26',
            courseName:'C++程序设计'
          },
          {
            courseId:'27',
            courseName:'C++程序设计'
          },
          {
            courseId:'28',
            courseName:'C++程序设计'
          },
          {
            courseId:'29',
            courseName:'C++程序设计'
          },
          {
            courseId:'30',
            courseName:'C++程序设计'
          },
          {
            courseId:'31',
            courseName:'C++程序设计'
          },
          {
            courseId:'32',
            courseName:'C++程序设计'
          },
          {
            courseId:'33',
            courseName:'C++程序设计'
          }

        ],
        relationLevelList: [
          {
            relationLevel: 1,
            relationName: '弱关联'
          },
          {
            relationLevel: 2,
            relationName: '半关联'
          },
          {
            relationLevel: 3,
            relationName: '强关联'
          },
          {
            relationLevel: 4,
            relationName: '全关联'
          },
        ],
        page: 1,
        limit: 10,
        total: 0,
        addConceptDialogFormVisible: false,
        updateConceptDialogFormVisible: false,
        nextConceptDialogFormVisible: false,
        // 关联知识点列表
        nextConceptList: [],
        // 能够被添加的关联知识点
        canBeAddedNextConceptList: [],
        // 选中的关联知识点
        nextConceptIdAndName: { conceptId: '', conceptName: '', relationLevel: '' },
        // 当前知识点
        currentConcept: {},
        // 更新知识点的信息
        updateConceptInfo: {},
        // 新增知识点弹框中上级知识点
        pConcept: { conceptId: '', conceptName: '' },
        // 页面数据
        conceptsList: [{
          conceptId: '',
          courseId: '',
          courseName: '',
          categoryId: '',
          categoryName: '',
          parentConceptId: '',
          parentConceptName: '',
          nextConceptStr: '',
          propertiesKey: '',
          propertiesValue: '',
          createdByName: '',
          createTime: '',
          updateTime: ''
        }],
        // 添加新知识点的课程信息（无用信息，只用作显示）
        addCourse: { courseId: '', courseName: '' },
        // 所有的课程信息（一级下拉框）
        oneCoursesIdAndNameList: [],
        // 添加新知识点的目录信息
        addCategory: { categoryId: '', categoryName: '' },
        // 课程信息对应的目录信息（二级联动下拉框）
        twoCategoryIdAndNameList: [],
        // 所有的知识点的id和名称
        allConceptsIdAndNameList: [],
        // 可被添加的上级知识点名称下拉框
        oneConceptsIdAndNameList: [],
        // 添加新知识点的所有信息
        addConceptInfo: {},
        colorObj: {
          '1': 'info',
          '2': 'warning',
          '3': 'success',
          '4': ''
        },
        // 组合知识点查询条件
        conceptQueryObj: {
          categoryId: '',
          courseName: '',
          categoryName: '',
          conceptId: '',
          conceptName: '',
          nextConceptStr: '',
          parentConceptId: '',
          parentConceptName: '',
          propertiesKey: '',
          propertiesValue: '',
          createdByName: ''
        }
      }
    },
    created() {
      const { id: categoryId } = this.$route.params
      categoryId.startsWith(':') ? this.getConceptList() : this.getConceptByCategoryId(categoryId)
    },
    methods: {
      // 跳转到该知识点对于的资源页面
      gotoResource(currentConceptId) {
        this.$router.push(`/resource/${currentConceptId}`)
      },
      // 根据目录id查询对应知识点
      getConceptByCategoryId(categoryId) {
        this.conceptQueryObj.categoryId = categoryId
        this.getConceptList()
      },
      // 删除关联知识点
      handleNextConceptTagClose(chooseConcept) {
        // 官方操作：删除该个标签
        this.nextConceptList.splice(this.nextConceptList.indexOf(chooseConcept), 1)
        // 执行删除操作
        concept.deleteConceptRelation(this.currentConcept.conceptId, chooseConcept.conceptId)
          .then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            // 重新渲染可添加的关联目录列表
            concept.getCanBeAddedNextConceptList(this.currentConcept.conceptId, this.currentConcept.categoryId)
              .then(res => {
                this.canBeAddedNextConceptList = res.data.canBeAddedNextConceptList
              })
            // 重新查询所有数据,刷新表格内容
            this.getConceptList()
          })
      },
      // 添加关联知识点
      addNextConcept() {
        this.nextConceptIdAndName.nextConceptId = this.nextConceptIdAndName.conceptId
        this.nextConceptIdAndName.conceptId = this.currentConcept.conceptId
        concept.addConceptRelation(this.nextConceptIdAndName)
          .then(res => {
            // 添加成功后，重新渲染关联知识点列表
            concept.getNextConceptList(this.currentConcept.conceptId)
              .then(res => {
                const { nextConceptList, relationLevelList } = res.data
                this.nextConceptList = nextConceptList
                if (this.nextConceptList) {
                  this.nextConceptList.forEach((item, index) => {
                    item.relationLevel = relationLevelList[index]
                  })
                }
                // 清空缓存
                this.nextConceptIdAndName = {}
                // 重新渲染可添加的关联知识点列表
                concept.getCanBeAddedNextConceptList(this.currentConcept.conceptId, this.currentConcept.categoryId)
                  .then(res => {
                    this.canBeAddedNextConceptList = res.data.canBeAddedNextConceptList
                  })
                this.getConceptList()
              })
          })
      },
      // 打开修改关联知识点信息弹框
      openNextConceptDialogForm(currentConceptInfo) {
        // 回显信息
        this.currentConcept = currentConceptInfo
        // 初始化可选关联知识点下拉框
        concept.getCanBeAddedNextConceptList(currentConceptInfo.conceptId, currentConceptInfo.categoryId)
          .then(res => {
            this.canBeAddedNextConceptList = res.data.canBeAddedNextConceptList
          })
        // 渲染所有关联知识点标签
        concept.getNextConceptList(currentConceptInfo.conceptId)
          .then(res => {
            const { nextConceptList, relationLevelList } = res.data
            this.nextConceptList = nextConceptList
            if (this.nextConceptList) {
              this.nextConceptList.forEach((item, index) => {
                item.relationLevel = relationLevelList[index]
              })
            }
          })
        this.nextConceptDialogFormVisible = true
      },
      // 更新知识点信息
      updateConceptInfoFunc(pConcept) {
        this.updateConceptInfo.parentConceptId = pConcept.conceptId
        this.updateConceptInfo.parentConceptName = pConcept.conceptName
        concept.updateConcept(this.updateConceptInfo)
          .then(res => {
            this.$message({
              type: 'success',
              message: '更新成功!'
            })
            // 刷新表格
            this.getConceptList()
          })

        this.updateConceptDialogFormVisible = false
      },
      // 打开更新知识点信息弹框
      openUpdateConceptDialog(currentConceptInfo) {
        // 清空缓存
        this.pConcept = {}
        this.updateConceptInfo = {}
        // 初始化可选上级知识点名称下拉框
        concept.getConceptsIdAndName()
          .then(res => {
            this.allConceptsIdAndNameList = res.data.allConceptsIdAndNameList
          })
        // 回显课程与目录名称
        const { conceptId, courseName, categoryId, categoryName, conceptName, parentConceptId, parentConceptName, propertiesKey, propertiesValue, createdByName } = currentConceptInfo
        // 回显上级知识点名称
        this.pConcept.conceptId = parentConceptId
        // this.pConcept.conceptName = parentConceptName
        this.updateConceptInfo = currentConceptInfo
        this.updateConceptDialogFormVisible = true
      },
      // 新增知识点按钮
      addConceptInfoFunc(addCategory, pConcept) {
        this.addConceptInfo.categoryId = addCategory.categoryId
        this.addConceptInfo.categoryName = addCategory.categoryName
        this.addConceptInfo.parentConceptId = pConcept.conceptId
        this.addConceptInfo.parentConceptName = pConcept.conceptName
        concept.addConcept(this.addConceptInfo)
          .then(res => {
            this.$message({
              type: 'success',
              message: '添加成功!'
            })
            // 刷新表格
            this.getConceptList()
          })
        // 清空下拉框信息
        this.addCourse = {}
        this.addCategory = {}
        this.pConcept = {}

        this.addConceptDialogFormVisible = false
      },
      // 新增知识点弹框的二级联动弹框，点击某个课程一级分类，触发change，显示对应二级分类
      courseOneChanged(course) {
        // alert(course.courseId)
        this.addCategory = {}
        // value为默认传递的参数，为下拉框中的label属性
        category.getCategoriesInfoByCourseId(course.courseId)
          .then(res => {
            this.twoCategoryIdAndNameList = res.data.twoCategoryIdAndNameList
          })
      },
      // 打开新增知识点信息弹框
      openAddConceptDialog() {
        // 置空已添加过的对象信息
        this.addConceptInfo = {}
        // 初始化二级联动下拉框
        course.getCoursesIdAndName()
          .then(res => {
            this.oneCoursesIdAndNameList = res.data.allCoursesIdAndNameList
          })
        // 初始化可选上级知识点名称下拉框
        // todo此处是否应该只查同一目录下的知识点
        concept.getConceptsIdAndName()
          .then(res => {
            this.allConceptsIdAndNameList = res.data.allConceptsIdAndNameList
          })
        this.addConceptDialogFormVisible = true
      },
      // 根据知识点id删除知识点信息
      deleteConceptById(conceptId) {
        this.$confirm('此操作将删除改知识点信息及下的关联信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //调用删除方法
          concept.deleteConcept(conceptId)
            .then(res => {
              //提示删除成功
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              //刷新列表
              this.getConceptList()
            })
        })
      },
      getConceptList(page = 1) {
        this.page = page
        concept.getConceptsPage(this.page, this.limit, this.conceptQueryObj)
          .then(response => {
            const { conceptsList, total } = response.data
            this.conceptsList = conceptsList
            this.total = total
          })
      },
      resetData() {
        // 清空查询条件
        this.conceptQueryObj = {}
        // 重新查询所有数据
        this.getConceptList()
      },
      // 导入Excel
      handleImport() {

      },
      // 导出Excel
      handleExport() {

      }
    }
  }
</script>
<style>
  .MySidebar{
    border-radius: 2px;
    border: 1px solid #e5dfdf;
  }

  .buttonClass {
    padding-bottom: 20px;
  }

  .noBorder {
    border: 0;
  }

  .el-tag {
    margin-right: 10px;
  }

  .el-tooltip__popper.is-dark {
    /*font-size: 8px;*/
    background: rgba(0, 0, 0, .4);
  }
</style>
